<template>
  <base-paenl>
    <span slot="header">
      房源标签
    </span>
    <div slot="main" class="slot-main">
      <div
        v-for="(item, index) of dataList"
        :key="index"
        :class="
          item.length == 2
            ? 'panel-row-content panel-row-content2'
            : item.length == 5
            ? 'panel-row-content panel-row-content5'
            : item.length == 6
            ? 'panel-row-content panel-row-content6'
            : item.length == 7
            ? 'panel-row-content panel-row-content7'
            : 'panel-row-content panel-row-content8'
        "
      >
        {{ item }}
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BasePaenl from "./CBase.vue";
import exportVue from "@/assets/modules/exportVue";

@Component({
  name: "CHouseLabel",
  components: { BasePaenl }
})
export default class extends Vue {
  dataList: any[] = [];
  mounted() {
    const win: any = window;
    const _this = this;
    exportVue.$on("initFloor", (item: any) => {
      _this.dataList = win.dataConfig.houseLabel;
      if(item){
        _this.dataList = item.fybq;
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 128px;
  display: flex;
  flex-wrap: wrap;
  .panel-row-content {
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    font-size: 14px;
    color: #ffffff;
    margin:0 10px 10px 0;
  }
  .panel-row-content2 {
    width: 52px;
    height: 29px;
    background-image: url(../../assets/images/panels/weizhibeijingkuangqian.png);
    background-size: 100% 100%;
  }
  .panel-row-content5 {
    width: 92px;
    background-image: url(../../assets/images/panels/biaotibeijing6zi-qian.png);
    background-size: 100% 100%;
  }
  .panel-row-content6 {
    width: 106px;
    background-image: url(../../assets/images/panels/biaotibeijing6zi-qian.png);
    background-size: 100% 100%;
  }
  .panel-row-content7 {
    width: 124px;
    background-image: url(../../assets/images/panels/biaotibeijing8zi-qian.png);
    background-size: 100% 100%;
  }
  .panel-row-content8 {
    width: 134px;
    background-image: url(../../assets/images/panels/biaotibeijing8zi-qian.png);
    background-size: 100% 100%;
  }
}
</style>
<style lang="scss"></style>
